<template>
  <div class="goods">
    <el-button @click="$router.push('/goods-add')" class="but" type="success" plain>添加商品</el-button>

    <el-table :data="form" style="width: 100%">
      <el-table-column type="index" label="#">

      </el-table-column>

      <el-table-column prop="goods_name" label="商品名称">

      </el-table-column>

      <el-table-column prop="goods_price" label="商品价格">

      </el-table-column>

      <el-table-column prop="goods_weight" label="商品重量">

      </el-table-column>

      <el-table-column label="创建时间">
        <template v-slot='{row}'>
          <!-- {{row}} -->
          {{ row.add_time | time }}
        </template>
      </el-table-column>

      <el-table-column prop="goods_name" label="操作">
        <template v-slot= '{ row }'>
          <el-button icon="el-icon-edit" type="primary" plain size= 'small'></el-button>
          <el-button icon="el-icon-delete" type="danger" plain size= 'small'></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page= pagenum
      :page-sizes="[5, 20, 50, 100]"
      :page-size= pagesize
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

  </div>
</template>

<script>
export default {
  data () {
    return {
      pagenum: 1,
      pagesize: 5,
      form: [],
      total: 0
    }
  },
  created () {
    this.goodsList()
  },
  methods: {
    async goodsList () { // 渲染
      const { meta, data } = await this.$axios.get('goods', {
        params: {
          pagenum: this.pagenum,
          pagesize: this.pagesize
        }
      })
      if (meta.status === 200) {
        this.total = data.total
        this.form = data.goods
        console.log(data)

        console.log(this.total, this.form)
      }
    },
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.pagesize = val
      this.pagenum = 1
      this.goodsList()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.pagenum = val
      this.goodsList()
    }
  }

}
</script>

<style lang = 'less' scoped>
  .but{
    margin-bottom: 20px;
  }
</style>
